<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="
    width=750,target-densitydpi=device-dpi,maximum-scale=1.0,
     user-scalable=no">
    <script type="text/javascript">
    function setWidth(e){if(/Andriod/i.test(navigator.userAgent))
    {var f,d=window.innerWidth;(d!=e)&&(f=d/e),
    document.addEventListener("DOMContentLoaded",
    function(){var a=document.getElementsByTagName
    ("body")[0];a.style.webkitTransformOrigin="left top";
    a.style.webkitTransform="scale("+f+")"},!1)}}setWidth(750);
    </script>
    <title>首页 - 乐购</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        .swiper-pagination-fraction {
            bottom: 10px;
            right: 20px;
            width: auto;
            font-size: .52rem;
            padding: 2px 10px;
            border-radius: 20px;
            color: #fff;
            background: rgba(0, 0, 0, .3);
            left: auto;
        }
    </style>
</head>
<body>
    <!-- 最大的容器 -->
    <div class="container">
        <header>
            <!-- 头部 -->
            <div class="header">
                <img class="logo" src="images/logo.png" alt="">
                <!-- search 搜索 -->
                <div class="search">
                    <i class="icon fl">&#xe6cf;</i>
                    <input type="text" placeholder="输入商家、分类或商圈">
                </div>
                <i class="icon saoma">&#xe604;</i>
                <i class="icon ring">&#xe6b0;</i>
            </div>
        </header>
    
        <section>
            <!-- 广告 ad 位 -->
            <div class="ad">
                <!-- <img src="images/ad1.jpg" alt="" class="img-response"> -->
            <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="images/ad4.jpg" alt="" class="img-responsive"></div>
                        <div class="swiper-slide"><img src="images/ad2.jpg" alt="" class="img-responsive"></div>
                        <div class="swiper-slide"><img src="images/ad3.jpg" alt="" class="img-responsive"></div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <!-- <div class="swiper-button-next"></div> -->
                    <!-- <div class="swiper-button-prev"></div> -->
                </div>
            </div>
        </section>
    
        <section>
            <!-- 广告下面的子菜单 -->
            <div class="menu">
                <ul>
                    <li>
                        <a href="">
                            <i class="icon d1">&#xe649;</i>
                            <p>抽奖</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d2">&#xe6d8;</i>
                            <p>兑换</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d3">&#xe600;</i>
                            <p>促销</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d4">&#xe65c;</i>
                            <p>闪送超市</p>
                        </a>
                    </li>
                </ul> 
                <div class="clear"></div>   
            </div>
        </section>
    
        <section>
            <!-- 商品 goods 列表 -->
            <div class="goods">
                <img src="images/goods1.jpg" alt="">
                <h3>Fresh奶</h3>
                <p class="list">光明畅优乳杆菌<span class="liu">6</span>元/<span>2</span>瓶</p>
                <div class="line"></div>
                <p>更多优惠 低至5折</p>
            </div>
            <div class="goods">
                <img src="images/goods2.jpg" alt="">
                <h3 class="nai">Fresh奶</h3>
                <p class="list">光明畅优乳杆菌<span class="li">6</span>元/<span>1</span>包</p>
                <div class="line"></div>
                <p>更多优惠 低至5折</p>
            </div>
            <div class="goods">
                <img src="images/goods1.jpg" alt="">
                <h3>Fresh奶</h3>
                <p class="list">光明畅优乳杆菌<span class="liu">6</span>元/<span>2</span>瓶</p>
                <div class="line"></div>
                <p>更多优惠 低至5折</p>
            </div>
            <div class="clear"></div>
        </section>
    
        <!-- 固定在底部用固定定位position:fixed; -->
        <footer>
            <div class="nice"></div>
        </footer>
        <nav>
            <div class="nav">
                <ul>
                    <li>
                        <a href="">
                            <i class="icon d1">&#xe61e;</i>
                            <p class="dd">首页</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d2">&#xe66e;</i>
                            <p>闪送超市</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d3">&#xe64a;</i>
                            <p>我的</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d4">&#xe60c;</i>
                            <p>￥0元起送</p>
                        </a>
                    </li>
                </ul> 
                <div class="clear"></div>   
            </div>
        </nav>
    
        <!-- <article></article>标识文章详细内容 -->
    </div>

    <script src="js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            loop:true,
            autoplay: {
            delay: 1000,
            // stopOnLastSlide: false, 
            disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            });
    </script>
</body>
</html>